<template>
  <van-nav-bar title="种草推荐"  left-arrow  @click-left="router.back()">
 <template #right>
      <van-icon name="add-o" @click="router.push('/add-article')" />
  </template>
</van-nav-bar>
<div class="list">
    <van-list
     :offset="10"
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
   <van-card
   @click="router.push(`/article-detail?articleId=${article.id}`)"
        class="item"
        v-for="article in list"
        :thumb="article.pic_url"
        :key="article"
      >
        <template #title>
          <p class="title">
            {{ article.title }}
          </p>
        </template>
        <template #desc
          ><p class="detail">{{ article.detail }}</p></template
        >
        <template #price>
          <p class="desc">
            {{ article.desc }}
          </p>
        </template>
        <template #num>
          <p>{{ article.created_at }}</p>
        </template>
      </van-card>
</van-list>
</div>

</template>
<script setup>
import { useRoute,useRouter } from 'vue-router'
import {getComments} from '@/api/comment'
import {onMounted,ref,reactive} from 'vue'
import usePageList from '@/Hooks/usePageList'
 let route = useRoute()
let router=useRouter()

let {onLoad,loading,finished,list}=usePageList(getComments,{ limit: 10, page: 1 })
</script>

 <style scoped lang="scss">
.content {
  .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .title {
      font-size: 16px;
      color: black;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .detail {
      margin-top: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: rgb(105, 105, 105);
    }
    .desc {
      color: rgb(105, 105, 105);
      font-weight: normal;
    }
  }
}
</style>